{% extends 'web/base.html' %}

{% block Meta %}
    {{ block.super }}
{% endblock %}

{% block title %}
    {{ block.super }}
{% endblock %}

{% block Css %}
    {{ block.super }}
{% endblock %}

{% block Js %}
    {{block.super}}
{% endblock %}

{% block content %}
	<!--start-home-->
	<div id="home" class="header">
		{% block header-top %}
            {{ block.super }}
        {% endblock %}
		<!-- banner-bottom -->
		<div class="banner">
			<!-- Slider-starts-Here -->
			<script src="/static/web/js/responsiveslides.min.js"></script>
				<script>
				    // You can also use "$(window).load(function() {"
				    $(function () {
				      // Slideshow 4
				      $("#slider3").responsiveSlides({
				        auto: true,
				        pager:true,
				        nav:false,
				        speed: 500,
				        namespace: "callbacks",
				        before: function () {
				          $('.events').append("<li>before event fired.</li>");
				        },
				        after: function () {
				          $('.events').append("<li>after event fired.</li>");
				        }
				      });
				
				    });
				  </script>
			<!--//End-slider-script -->
				<div  id="top" class="callbacks_container">
					<ul class="rslides" id="slider3">
						<li>
							<img class="img-responsive" src="/static/web/images/1.jpg" alt="">
						</li>
						<li>
						<img class="img-responsive" src="/static/web/images/2.jpg" alt="">
						</li>
						<li>
						<img class="img-responsive" src="/static/web/images/1.jpg" alt="">
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--banner-bottom-->
		<div class="banner-bottom">
			<div class="container">
			 <div class="banner-bot-grids">
				 <div class="col-md-4 banner-grid one">
				      <div class="col-md-3 icon">
						<i class="s1"> </i>
					</div>
					<div class="col-md-9 icon-text">
					    <h4>Lorem Ipsum</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt dolor et.</p>
					 </div>
					  <div class="clearfix"> </div>
				 </div>
				 <div class="col-md-4 banner-grid two">
				      <div class="col-md-3 icon">
						<i class="s2"> </i>
					</div>
					<div class="col-md-9 icon-text">
					     <h4>LOrem Ipsum</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt dolor et.</p>
					 </div>
					  <div class="clearfix"> </div>
				 </div>
				 <div class="col-md-4 banner-grid three">
				     <div class="col-md-3 icon">
						<i class="s3"> </i>
					</div>
					<div class="col-md-9 icon-text">
					     <h4>LOrem Ipsum</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt dolor et.</p>
					 </div>
					  <div class="clearfix"> </div>
				 </div>
			 </div>
			 <div class="clearfix"> </div>
		</div>
	</div>
	<!--latest-post-->
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" ></a></div>
		<!--top-games-section-->
				  <div class="top-games-section">
	 				 <div class="container">
						<!--sreen-gallery-cursual-->
						<div class="col-md-3 top-games">
						      <h3>Top Games</h3>
							  <p>Why not give one of these popular Games a look?</p>
							   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
						<div class="col-md-9 g-views">
							<ul id="flexiselDemo3">
								<li>
								<div class="biseller-column">
								<a class="lightbox" href="#goofy">
											   <img src="/static/web/images/s1.jpg"/>
											</a> 
											<div class="lightbox-target" id="goofy">
												  <img src="/static/web/images/s1.jpg"/>
											   <a class="lightbox-close" href="#"> </a>

												<div class="clearfix"> </div>
											</div>
								</div>
							</li>
							<li>
								<div class="biseller-column">
								<a class="lightbox" href="#goofy">
											  <img src="/static/web/images/s2.jpg"/>
											</a> 
											<div class="lightbox-target" id="goofy">
												  <img src="/static/web/images/s2.jpg"/>
											   <a class="lightbox-close" href="#"> </a>

												<div class="clearfix"> </div>
											</div>
								</div>
							</li>
							<li>
								<div class="biseller-column">
								<a class="lightbox" href="#goofy">
											  <img src="/static/web/images/s3.jpg"/>
											</a> 
											<div class="lightbox-target" id="goofy">
												  <img src="/static/web/images/s3.jpg"/>
											   <a class="lightbox-close" href="#"> </a>

												<div class="clearfix"> </div>
											</div>
								</div>
							</li>
							<li>
								<div class="biseller-column">
								<a class="lightbox" href="#goofy">
												<img src="/static/web/images/s1.jpg"/>
											</a> 
											<div class="lightbox-target" id="goofy">
												<img src="/static/web/images/s1.jpg"/>
											   <a class="lightbox-close" href="#"> </a>

												<div class="clearfix"> </div>
											</div>
								</div>
							</li>
							<li>
								<div class="biseller-column">
								<a class="lightbox" href="#goofy">
											  <img src="/static/web/images/s2.jpg"/>
											</a> 
											<div class="lightbox-target" id="goofy">
												  <img src="/static/web/images/s2.jpg"/>
											   <a class="lightbox-close" href="#"> </a>

												<div class="clearfix"> </div>
											</div>
								</div>
							</li>
							<li>
								<div class="biseller-column">
								<a class="lightbox" href="#goofy">
											   <img src="/static/web/images/s1.jpg"/>
											</a> 
											<div class="lightbox-target" id="goofy">
												<img src="/static/web/images/s1.jpg"/>
											   <a class="lightbox-close" href="#"> </a>

												<div class="clearfix"> </div>
											</div>
								</div>
							</li>
							<li>
								<div class="biseller-column">
											<a class="lightbox" href="#goofy">
												<img src="/static/web/images/s2.jpg"/>
											</a> 
											<div class="lightbox-target" id="goofy">
												<img src="/static/web/images/s2.jpg"/>
											   <a class="lightbox-close" href="#"> </a>
												
												<div class="clearfix"> </div>
											</div>
								</div>
							</li>
						</ul>
					<script type="text/javascript">
						 $(window).load(function() {
							$("#flexiselDemo3").flexisel({
								visibleItems:3,
								animationSpeed: 1000,
								autoPlay: true,
								autoPlaySpeed: 3000,    		
								pauseOnHover: true,
								enableResponsiveBreakpoints: true,
								responsiveBreakpoints: { 
									portrait: { 
										changePoint:480,
										visibleItems:3
									}, 
									landscape: { 
										changePoint:640,
										visibleItems:3
									},
									tablet: { 
										changePoint:768,
										visibleItems:3
									}
								}
							});
							
						});
					   </script>
					   <script type="text/javascript" src="/static/web/js/jquery.flexisel.js"></script>
					</div>   
			</div>
	</div>
	<!--start-latest-->
		<div class="latest-post">
			<div class="container">
			        <h3>Latest Games</h3>
			<div class="grid">
				<figure class="effect-hera">
						<img src="/static/web/images/l1.jpg" alt="img07"/>
						<figcaption>
							<h2><a href="#">最新 游戏</a></h2>
							
						</figcaption>			
					</figure>
					<figure class="effect-hera">
						<img src="/static/web/images/l2.jpg" alt="img07"/>
						<figcaption>
							<h2><a href="#">最新 游戏</a></h2>
							
						</figcaption>			
					</figure>
					<figure class="effect-hera">
						<img src="/static/web/images/l3.jpg" alt="img07"/>
						<figcaption>
							<h2><a href="#">最新 游戏</a></h2>
							
						</figcaption>			
					</figure>
					<figure class="effect-hera">
						<img src="/static/web/images/l4.jpeg" alt="img07"/>
						<figcaption>
							<h2><a href="#">最新 游戏</a></h2>
							
						</figcaption>			
					</figure>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	<!--start-new-trailers-->
		<div class="new-trailers">
	    <div class="container">
				<h3>New Trailers</h3>
			 <div class="trailer-top">
				<div class="col-md-7 trailer">
				</div>
				<div class="col-md-5 trailer-text">
				   <div class="sub-trailer">
				       <div class="col-md-4 sub-img">
							<img src="/static/web/images/v2.jpg" alt="img07"/>
					   </div>
					   <div class="col-md-8 sub-text">
					   		 <a href="#">Killzone: Shadow Fall for PlayStation 4 Reviews</a>
							 <p>Lorem ipsum dolor sit amet, consectetur adipi…</p>
					   </div>
					    <div class="clearfix"> </div>
				   </div>
				    <div class="sub-trailer">
				       <div class="col-md-4 sub-img">
							<img src="/static/web/images/v1.jpg" alt="img07"/>
					   </div>
					   <div class="col-md-8 sub-text">
					   		 <a href="#"> Spiderman 2 Full Version PC Game</a>
							 <p>Lorem ipsum dolor sit amet, consectetur adipi…</p>
					   </div>
					    <div class="clearfix"> </div>
				   </div>
				    <div class="sub-trailer">
				       <div class="col-md-4 sub-img">
							<img src="/static/web/images/v3.jpg" alt="img07"/>
					   </div>
					   <div class="col-md-8 sub-text">
					   		 <a href="#">Killzone: Shadow Fall for PlayStation 4 Reviews</a>
							 <p>Lorem ipsum dolor sit amet, consectetur adipi…</p>
					   </div>
					    <div class="clearfix"> </div>
				   </div>
				</div>
				 <div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!--start-blog-->
		<div id="blog" class="blog-section">
		   <div class="container">
		         <h3>Blog</h3>
				 <div class="blog">
				   <div class="col-md-4 blog-text">
					   <h5>THU 14 May, 2015</h5>
					   <a href="single.html"><h4>EXCEPTEUR SINT OCCAECAT CUPIDATAT NON</h4></a>
					   <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				   </div>
					<div class="col-md-8 welcome-img">
					 <a href="{% url 'game:single' %}" class="mask"><img src="/static/web/images/b2.jpg" alt="image" class="img-responsive zoom-img"></a>
					</div>
				   <div class="clearfix"> </div>
			   </div>
			    <div class="blog">
				 <div class="col-md-4 blog-text two">
					   <h5>THU 14 May, 2015</h5>
					  <a href="{% url 'game:single' %}"><h4>LOREM IPSUM DOLOR SIT AMET CONSE</h4></a>
					   <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				   </div>
					<div class="col-md-8 blog-img two">
					 <a href="{% url 'game:single' %}" class="mask"><img src="/static/web/images/b3.jpg" alt="image" class="img-responsive zoom-img"></a>
					</div>
				   <div class="clearfix"> </div>
			   </div> 
			    <div class="blog">
				   <div class="col-md-4 blog-text">
					   <h5>THU 14 May, 2015</h5>
					   <a href="{% url 'game:single' %}"><h4>EXCEPTEUR SINT OCCAECAT CUPIDATAT NON</h4></a>
					   <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				   </div>
					<div class="col-md-8 welcome-img">
					 <a href="{% url 'game:single' %}" class="mask"><img src="/static/web/images/b1.jpg" alt="image" class="img-responsive zoom-img"></a>
					</div>
				   <div class="clearfix"> </div>
			   </div>
		</div>
	</div>
	
   <!--footer--->
		<div class="footer text-center">
				<div class="container">
					<div class="footer-grids">
						<div class="col-md-6 footer-text">  
							<h3>About Us</h3>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since, Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
							<a class="read" href="news.html">Read More</a>
						</div>
						<div class="col-md-6 footer-info">
							<h3>Get In Touch</h3>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since, </p>
							<div class="support">
							   <input type="text" class="text" value="Enter email..." onFocus="this.value = '';" onBlur="if (this.value == 'Enter email...') {this.value = 'Enter email...';}">
							   <input type="submit" value="SUBSCRIBE" class="botton">
							</div>
					</div>
					<div class="clearfix"> </div>
				</div>
					<div class="copy">
		              <p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
		            </div>
				</div>
			</div>
			<!--start-smoth-scrolling-->
			<script type="text/javascript">
								jQuery(document).ready(function($) {
									$(".scroll").click(function(event){		
										event.preventDefault();
										$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
									});
								});
								</script>
							<!--start-smoth-scrolling-->
						<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
		<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	<!--左侧菜单栏-->
	<div id="left_menu">
		<div class="recommend">推荐</div>
		<div class="recommend_items">
            <a href="#">好友推荐</a>
            <a href="#">由鉴赏家推荐</a>
            <a href="#">标签</a>
        </div>
        <div class="browse_categories">浏览分类</div>
        <div class="browse_categories_items">
            <a href="#">热销商品</a>
            <a href="#">最近更新</a>
            <a href="#">新品</a>
            <a href="#">即将推出</a>
            <a href="#">优惠</a>
        </div>
        <div class="type_browse">按类型浏览</div>
        <div class="type_browse_items">
            <a href="#">免费游玩</a>
            <a href="#">抢先体验</a>
            <a href="#">休闲</a>
            <a href="#">体育</a>
            <a href="#">冒险</a>
            <a href="#">动作</a>
            <a href="#">模拟</a>
            <a href="#">独立</a>
            <a href="#">竞速</a>
            <a href="#">策略</a>
            <a href="#">角色扮演</a>
        </div>
	</div>

{% endblock %}